<template>
    <div class="Form" :style="{ right: CStore.RightStatus ? '0' : '-400px' }">
        <div class="Form-switch" @click="CStore.RightStatus = !CStore.RightStatus">
            <RightOutlined :class="{ close: !CStore.RightStatus }" />
        </div>
        <a-form class="FormView" :label-col="labelCol" v-if="ActiveModel">
            <template v-for="item in ActiveModel.ViewModel">
                <div class="Title">{{ item.title }}</div>
                <ItemView v-for="child in item.children" :Options="child" :Value="ActiveModel" />
            </template>
            <br>
            <a-form-item class="ButtonView">
                <a-button type="primary" style="margin-left:100px">提交</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>
<script setup>
import { RightOutlined } from '@ant-design/icons-vue'
import { ref, watch } from 'vue';
import { GetCommonStore } from '../../store/Common'
import ItemView from '../FormItem/Item.vue'


const CStore = GetCommonStore();

const ActiveModel = ref(null);

const SetModel = function (Model) {
    ActiveModel.value = Model
}

defineExpose({
    SetModel,
});

// 表单标签布局
const labelCol = ref({ style: { width: '100px', } });


</script>
<style lang="less" scoped>
.Form {
    width: 400px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transition: right 0.3s;

    &-switch {
        width: 20px;
        height: 40px;
        border-radius: 5px 0 0 5px;
        position: absolute;
        left: 0px;
        top: 50%;
        transform: translateX(-20px);
        background-color: #313131;
        color: #fff;
        line-height: 40px;
        text-align: center;
        opacity: 0.5;
        cursor: pointer;
        transition: opacity 0.3s;

        &:hover {
            opacity: 1;
        }

        .close {
            transform: rotateZ(180deg);
        }
    }
}

.FormView {
    padding: 10px;
}

.Title {
    border-bottom: 1px solid #ccc;
    padding: 2px 10px;
    font-size: 18px;
}

:deep(.ant-form-item) {
    margin-bottom: 5px;
}
</style>